<html>
<head>
<style type="text/css">
    .x-focus {
        background: yellow;
    }

    #d1, #d2 {
        height: 20px;
        zoom: 1;
    }
</style>
</head>
<body>

<div id='d1' tabindex='-1' class="x-test">

            <span>
            click me 1 ,select me 1
            </span>

</div>


<div id='d2' tabindex='-1' class="x-test">

            <span>
            click me 2 ,select me 2
            </span>

</div>

</body>
<script src="http://yiminghe.github.com/kissy/build/kissy-min.js"></script>

<script>
    KISSY.ready(function(S) {
        var d1 = S.one("#d1"),
                UA = S.UA,
                d2 = S.one("#d2"),
                unselectable =
                        UA.gecko ?
                                function(el) {
                                    el = el[0] || el;
                                    el.style.MozUserSelect = 'none';
                                }
                                : UA.webkit ?
                                function(el) {
                                    el = el[0] || el;
                                    el.style.KhtmlUserSelect = 'none';
                                }
                                :
                                function(el) {
                                    el = el[0] || el;
                                    if (UA.ie || UA.opera) {
                                        var
                                                e,
                                                i = 0;

                                        el.setAttribute("unselectable", 'on');
                                        var els = el.getElementsByTagName("*");
                                        while (( e = els[ i++ ] )) {
                                            switch (e.tagName.toLowerCase()) {
                                                case 'iframe' :
                                                case 'textarea' :
                                                case 'input' :
                                                case 'select' :
                                                    /* Ignore the above tags */
                                                    break;
                                                default :
                                                    e.setAttribute("unselectable", 'on');
                                            }
                                        }
                                    }
                                };

        var list = S.all(".x-test");

        list.on("focus", function() {
            S.log(this.attr("id") + " focus");
            this.addClass("x-focus");
        });

        S.all(".x-test").on("blur", function() {
            S.log(this.attr("id") + " blur");
            this.removeClass("x-focus");
        });
        d2.on("mousedown", function(ev) {
            S.log(this.attr("id") + " mousedown");
            ev.preventDefault();
        });
        d1[0].focus();
        unselectable(d2);
    });


</script>
</html>


